该版本是带有css样式的实现效果,属于初步整理。
纯js实现效果请看上传图片并实现本地预览（2）。 这两篇文档的区别在于：兼容IE时，本文的滤镜css样式写在css样式中。效果预览
html
本地上传图片并实现预览 上传图片
css样式
用css实现上传按钮的美化，这个我就随便写了写，比较丑
.upload-wrap{ overflow: hidden;}.upload-box{ position: relative; width: 106px; height: 106px; border:1px solid #e1e1e9; overflow: hidden; float: left; margin: 10px;}.upload-span{ display: block; width: 100%; height: 100%; line-height: 100px; font-size: 20px; color: #fff; background: green; text-align: center; position: absolute; left: 0; top: 0; z-index: 5;}.upload-btn{ display: block; width: 100%; height: 100%; position: absolute; left: 0; right: 0; font-size:90px; z-index: 10; opacity: 0; filter:Alpha(opacity=0);}.close-btn{ display: block; width: 17px; height: 17px; position: absolute; background: url(../img/close.gif); right: -1px; top: -1px; z-index: 100; cursor: pointer;}.preview-img-box{ width: 100px; height: 100px; padding: 3px; position: absolute; top: 0; left: 0; z-index: 15; background: #fff; display: none;}.preview-img-box img{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);} 该句样式一定要有。如果没有此句，js会报错。
.preview-img-box img{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);} 没有此句css样式，上传图片效果如下图：
报错：
js
IE10以上才支持FileReader();针对IE7~IE9使用滤镜的方式实现图片预览。由于accept属性IE9及以下浏览器不兼容，因此在上传图片时对文件后缀名进行验证。
$(function(){ $(document).on('change','.upload-btn',function(){ var _this = $(this); var imgbox = _this.siblings('.preview-img-box'); var maxWidth = imgbox.width(); var maxHeight = imgbox.height(); //IE浏览器，使用滤镜 if(navigator.userAgent.indexOf("MSIE")>0){ if(navigator.userAgent.indexOf("MSIE 7.0")>0 || navigator.userAgent.indexOf("MSIE 8.0")>0 || navigator.userAgent.indexOf("MSIE 9.0")>0){ var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'; _this.select(); var imgsrc = document.selection.createRange().text; var imgreg = /\.jpg$|\.jpeg$|\.gif$|\.png$/i; if(imgreg.test(imgsrc)){ imgbox.show(); imgbox.html('![]()
'); var img = document.getElementById("PreviewImg"); img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgsrc; var rect = clacImgZoomParam(maxWidth, maxHeight, img.offsetWidth, img.offsetHeight); status = ('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height); var odiv = " "; imgbox.html(odiv); document.selection.empty(); var upload_box = ' ' +' 上传图片' +' ' +' '; $(upload_box).appendTo($('.upload-wrap')); } else{ alert('图片类型必须是.gif,jpeg,jpg,png中的一种！') } } } else{ var ofile = _this.prop('files')[0] || _this.files[0]; if(ofile){ if(window.FileReader){ var fr = new FileReader(); fr.onloadend = function(e){ var imgbox = _this.siblings('.preview-img-box'); imgbox.show(); console.log(e.target.result); var oimg = '
'; $(oimg).appendTo(imgbox); var Img = imgbox.find('.preview-img'); var rect = clacImgZoomParam(maxWidth, maxHeight, Img.width(), Img.height()); Img.css({ "display":"block", "width":rect.width, "height":rect.height, "margin-top":rect.top, "margin-left":rect.left }) } fr.readAsDataURL(ofile); } var upload_box = ' ' +' 上传图片' +' ' +' '; $(upload_box).appendTo($('.upload-wrap')); } } }) //删除功能 $(document).on('click','.close-btn',function(){ var oindex = $(this).parents('.upload-box').index(); if(oindex == 0){ $(this).siblings('.preview-img-box').html(''); $(this).siblings('.preview-img-box').hide(); $(this).siblings('.upload-btn').val(''); $(this).siblings('.upload-btn').show(); $(this).siblings('.upload-span').show(); } else{ $(this).parents('.upload-box').remove(); } })})function clacImgZoomParam( maxWidth, maxHeight, width, height ){ var param = {top:0, left:0, width:width, height:height}; if( width>maxWidth || height>maxHeight ) { rateWidth = width / maxWidth; rateHeight = height / maxHeight; if( rateWidth > rateHeight ) { param.width = maxWidth; param.height = Math.round(height / rateWidth); }else { param.width = Math.round(width / rateHeight); param.height = maxHeight; } } param.left = Math.round((maxWidth - param.width) / 2); param.top = Math.round((maxHeight - param.height) / 2); return param; }